<template>
	<view>
		<image @click="$emit('prEvmet')"  :class="imageClass" lazy-load :src="src" mode="widthFix" :style="emoticon?emoticonImgWidths:imgWidths" @load="loadImage" class="bg-hover-light"></image>
	</view>
</template>

<script>
	export default {
		props:{
			src:{
				type:String,
				default:'/static/video/video_cover.jpg'  
			},
			imageClass:{
				type:String,
				default:''
			},
			emoticon:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				imgWidth:'',//图片的宽高
			}
		},
		computed:{
			imgWidths(){
				return `width:${this.imgWidth}px`
			},
			emoticonImgWidths(){
				return `width:100px`
			}
		},
		methods: {
			// 加载图片
			loadImage(e){
				// 图片的最大宽度控制在200,小于200时显示图片本身的宽度即可
				let w = e.detail.width > 200 ?200:e.detail.width
				this.imgWidth = w
				this.$emit('load',{
					w:this.imgWidth
				})
			},
		}
	}
</script>

<style>
	@import '@/common/free.css';
	@import '@/common/common.css';
	@import '@/common/comicon.css';
	@import '@/common/free-icons.css';
</style>
